<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <head>
        <title>Activity Log</title>
        <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css"/>
        <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/font-awesome-4.2.0.min.css"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="http://snipplicious.com/js/jquery.js"></script>
        <script src="http://snipplicious.com/js/bootstrap.min.js"></script>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
    </head>
    <body>

        <ui:composition template="./master/MasterPage.xhtml">

            <ui:define name="content">
                <div class="container">
                    <ol class="breadcrumb">
                        <li class="active"><strong>Activity Log</strong></li>
                    </ol>
                </div>
                <div class="container" style="padding-top: 60px;">
                    <div class="row">
                        <!-- left column -->
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="text-center">
                                <ul>
                                    <li>
                                        <img src="image/images.jpg" class="avatar img-circle img-thumbnail" alt="avatar"/>

                                    </li>

                                </ul>
                            </div>
                            <div style="padding-left: 30px;">
                                <ul>
                                    <li>
                                        <i class="fa fa-user fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{login.fullname}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-calendar fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.birthdate}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-male fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.gender}</span>
                                    </li>
                                    <hr/>
                                    <li>
                                        <i class="fa fa-apple fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.possition}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-trophy fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.department}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-group fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.group}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- edit form column -->
                        <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active">
                                    <a href="#home" data-toggle="tab">
                                        Events Registed
                                    </a>
                                </li>
                                <li><a href="#ios" data-toggle="tab">Commented</a></li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade in active" id="home">
                                    <c:choose>
                                        <c:when test="#{eventRegistrationController.listEventRegistration !=null}">
                                            <c:forEach var="er" items="#{eventRegistrationController.listEventRegistration}">
                                                <h:form>
                                                    <div class="row" style="margin-top:20px;padding-left:10px;">
                                                        <div class="col-xs-6 col-sm-3">Registed </div>
                                                        <div class="col-xs-6 col-sm-3"><a href="EventDetail.xhtml?eventId=#{er.eventId.eventId}">#{er.eventId.name}</a></div>
                                                        <div class="col-xs-6 col-sm-3">on </div>
                                                        <div class="col-xs-6 col-sm-3">#{er.timeRegisted}</div>
                                                    </div>
                                                </h:form>
                                            </c:forEach>
                                        </c:when>
                                        <c:otherwise><p>null</p></c:otherwise>
                                    </c:choose>
                                </div>
                                <div class="tab-pane fade" id="ios">
                                    <c:choose>
                                        <c:when test="#{eventCommentController.listEventComment !=null}">
                                            <c:forEach var="er" items="#{eventCommentController.listEventComment}">
                                                <h:form>
                                                    <div class="row" style="margin-top:20px;padding-left:10px;">
                                                        <div class="col-xs-6 col-sm-2">Commented</div>
                                                        <div class="col-xs-6 col-sm-2"><a href="EventDetail.xhtml?eventId=#{er.eventId.eventId}" >#{er.eventId.name}</a></div>
                                                        <div class="col-xs-6 col-sm-2">with</div>
                                                        <div class="col-xs-6 col-sm-2"><font color="blue">#{er.comment}</font></div>
                                                        <div class="col-xs-6 col-sm-2">on</div>
                                                        <div class="col-xs-6 col-sm-2">#{er.commented}</div>
                                                    </div>
                                                </h:form>
                                            </c:forEach>
                                        </c:when>
                                        <c:otherwise><p>null</p></c:otherwise>
                                    </c:choose>
                                </div>
                            </div>
                            <script>
                                $(function() {
                                    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                                        // Get the name of active tab
                                        var activeTab = $(e.target).text();
                                        // Get the name of previous tab
                                        var previousTab = $(e.relatedTarget).text();
                                        $(".active-tab span").html(activeTab);
                                        $(".previous-tab span").html(previousTab);
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </ui:define>

        </ui:composition>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>
